import React, { Component } from 'react';
import { Button } from 'antd';
import _ from 'underscore';
import 'fabric';
import WrapPage from './_wrap'
import styles from './main.less';
import matrix from './matrix';
import Tran from './tran.js';
import ImgFilter from './filter.js';
import api from '../model/_api';
import { Slider, Input, Row, Col } from 'antd';


class _Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: 0 };
  }

  componentDidUpdate() {
    if (this.state.isTran) {
      Tran.getWin('canvas_tran', this.state.tranItem);
    }
    else {
      Tran.delectMouse();
    }
  }

  
  render() {
    return (
      <div>
        <Row>
          <Col span={4}>
            <div style={{ marginLeft: 16 }}>亮度</div>
          </Col>
          <Col span={12}>
            <Slider min={-100} max={+100} onChange={this.onChange} value={parseInt(this.state.inputValue)} />
          </Col>
          <Col span={4}>
            <div style={{ marginLeft: 16 }}>{this.state.inputValue}</div>
          </Col>
        </Row>
        <Row>
          <Col span={4}>
            <div style={{ marginLeft: 16 }}>对比度</div>
          </Col>
          <Col span={12}>
            <Slider min={-100} max={+100} onChange={this.onChange} value={parseInt(this.state.inputValue)} />
          </Col>
          <Col span={4}>
            <div style={{ marginLeft: 16 }}>{this.state.inputValue}</div>
          </Col>
        </Row>
        <Row>
          <Col span={4}>
            <div style={{ marginLeft: 16 }}>饱和度</div>
          </Col>
          <Col span={12}>
            <Slider min={-100} max={+100} onChange={this.onChange} value={parseInt(this.state.inputValue)} />
          </Col>
          <Col span={4}>
            <div style={{ marginLeft: 16 }}>{this.state.inputValue}</div>
          </Col>
        </Row>
        <Row>
          <Col span={4}>
            <div style={{ marginLeft: 16 }}>清晰度</div>
          </Col>
          <Col span={12}>
            <Slider min={-100} max={+100} onChange={this.onChange} value={parseInt(this.state.inputValue)} />
          </Col>
          <Col span={4}>
            <div style={{ marginLeft: 16 }}>{this.state.inputValue}</div>
          </Col>
        </Row>
        <Row>
          <Col span={4}>
            <div style={{ marginLeft: 16 }}>色彩</div>
          </Col>
          <Col span={12}>
            <Slider min={-100} max={+100} onChange={this.onChange} value={parseInt(this.state.inputValue)} />
          </Col>
          <Col span={4}>
            <div style={{ marginLeft: 16 }}>{this.state.inputValue}</div>
          </Col>
        </Row>
        <Row>
          <Col span={4}>
            <div style={{ marginLeft: 16 }}>透明度</div>
          </Col>
          <Col span={12}>
            <Slider min={-100} max={+100} onChange={this.onChange} value={parseInt(this.state.inputValue)} />
          </Col>
          <Col span={4}>
            <div style={{ marginLeft: 16 }}>{this.state.inputValue}</div>
          </Col>
        </Row>
      </div>
    );
  }
}

export default _Page
